<template>
    <view>
        <view class="items" :id="'or' + item.id" v-for="item in list" :key="item.uuid" @click="orderDetails(item.id)">
            <view class="u-flex u-row-between u-col-center order-top">
                <view class="u-font-30 u-flex" @click.stop="">
                    <view v-if="item.status == 1 && check">
                        <u-checkbox v-model="item.checked"></u-checkbox>
                    </view>
                    <view class="or-title">订单号：{{ item.id }}</view>
                </view>
                <slot name="status" :item="item"></slot>
            </view>
            <view class="items-innerBox" v-if="!item.open">
                <view class="order-item" v-for="sub in item.skus" :key="sub.uuid">
                    <view class="u-flex u-a-i-s">
                        <img-cache class="good-image u-flex-shrink" :src="`${global.productImageUrl}${sub.picId}/1`" width="150" height="150" borderRadius="20"></img-cache>
                        <view class="goods-name">
                            <view class="">{{ sub.name }}</view>
                            <view class="subtotal-text" v-if="item.skus.length > 1">
                                <text>X {{ sub.num }}</text>
                                <text>小计：￥{{ Number(sub.total).toFixed(2) }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="u-flex u-row-between u-col-center item-info">
                    <text class="item-info-count">共 {{ item.totalNum }} 件</text>
                    <view v-if="item.amountPrice" class="amount">
                        <text>已优惠</text>
                        <text>￥{{ Number(item.amountPrice).toFixed(2) }}</text>
                    </view>
                    <text class="acture-pay">实付：￥{{ item.payPrice }}</text>
                </view>
                <slot name="function" :item="item"></slot>
                <!-- 展开按钮 -->
                <view class="fold-wrapper" @click.stop="fold(item)" v-if="item.type == 0">
                    <text>展开</text>
                    <u-icon name="arrow-down"></u-icon>
                </view>
            </view>
            <!-- 折叠展开的样子 -->
            <view class="fold-open" v-if="item.open">
                <view v-for="(model, index) in orders[item.id]" :key="item.id + '' + index">
                    <view v-for="[key, entry] of model" :key="entry.uuid">
                        <view class="order-items">
                            <view class="wrapper-1">
                                <view class="good-title u-line-2">{{ entry.name }}</view>
                            </view>
                            <view class="summary">
                                <text class="">数量：{{ entry.subCount }}件</text>
                                <text class="">小计：￥{{ Number(entry.subPrice).toFixed(2) }}</text>
                            </view>
                        </view>
                        <view class="skus">
                            <template v-for="[key2, itm] of entry.children">
                                <view class="skus-items-wrapper">
                                    <view class="skus-items">
                                        <view class="sku-content">
                                            <!-- 规格 图 -->
                                            <view class="left">
                                                <view class="checkAndImg">
                                                    <view style="width: 30rpx"></view>
                                                    <view class="image-wrapper">
                                                        <img-cache v-show="itm.picId" class="model-img" :src="itm.picId ? `${global.productImageUrl}${itm.picId}/1` : `/static/images/placeholder.png`" width="150" height="150" border-radius="10" />
                                                    </view>
                                                </view>
                                                <view class="sku-content-value">
                                                    <view class="collarName" v-if="itm.collarName != '无领'">{{ itm.collarName }}</view>
                                                    <view class="colorName">{{ itm.colorName }}</view>
                                                    <view class="price">单价 ￥{{ itm.userPrice }}</view>
                                                </view>
                                            </view>
                                            <view class="vertical-line"></view>
                                            <!-- 右侧信息 -->
                                            <view class="right-part">
                                                <view v-for="(innerItem, i) in itm.list" :key="innerItem.id">
                                                    <view class="right-part-line2">
                                                        <view class="sub-text">
                                                            <text class="skus-items-size">{{ innerItem.sizeName || '空' }}</text>
                                                        </view>
                                                        <view style="color: #b5b5b5">x{{ innerItem.num }}</view>
                                                    </view>
                                                    <view class="borderBottom" v-if="i + 1 != itm.list.length"></view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </template>
                        </view>
                        <holder v-if="orders[item.id].length > 1 && index != orders[item.id].length - 1" height="20rpx"></holder>
                    </view>
                </view>
                <view class="bottom-button-bar order-wrapper-bottom">
                    <view class="u-flex u-row-between u-col-center item-info">
                        <text class="item-info-count">共 {{ item.totalNum }} 件</text>
                        <view v-if="item.amountPrice" class="amount">
                            <text>已优惠</text>
                            <text>￥{{ Number(item.amountPrice).toFixed(2) }}</text>
                        </view>
                        <text class="acture-pay">实付：￥{{ item.payPrice }}</text>
                    </view>
                    <slot name="functionFold" :item="item"></slot>
                </view>
                <!-- 收起按钮 -->
                <view class="fold-wrapper" @click.stop="pickup(item)">
                    <text>收起</text>
                    <u-icon name="arrow-up"></u-icon>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useOrderStore } from '@/store'
import global from '@/config'

const Poprs = withDefaults(
    defineProps<{
        list: any[]
        check?: boolean
        scroll?: boolean
    }>(),
    {
        list: () => [],
        check: true,
        scroll: false
    }
)

const emit = defineEmits(['scroll'])

const orderStore = useOrderStore()

const orders = computed(() => {
    return orderStore.orders
})

const pickup = (item: any) => {
    item.open = false
    if (Poprs.scroll) {
        setTimeout(() => {
            emit('scroll', item.id)
        }, 300)
    }
}

const fold = (item: any) => {
    if (Poprs.scroll) {
        setTimeout(() => {
            emit('scroll', item.id)
        }, 300)
    }
    item.open = true
    let id = item.id
    if (orders.value[id]) return
    console.log('没有缓存,开始处理数据')
    // 点击展开面板时才计算 4维数据
    let list = item.skus
    // 建立一个对象
    let data: {id: string, list: any[]} = { id, list: [] }
    for (let temp of list) {
        // 使用Map 结构 存储对象
        let goodMap = new Map()

        temp.list.forEach((sku: any) => {
            let label = sku.specificationsCollarId
            // 抽出一个数组 存放这个款型的所有sku
            let arr = temp.list.filter((m: any) => m.specificationsCollarId == sku.specificationsCollarId)

            // 如果 Map 上不存在 键 label 则新建
            if (!goodMap.has(label)){
                goodMap.set(label,{
                    name: sku.goodsName,
                    collarName: sku.collarName,
                    modelNo: sku.modelNo,
                    releaseId: sku.releaseId,
                    collarText: sku.collarText || '领型',
                    spuId: sku.spuId,
                    unid: uni.$u.guid(6),
                    specificationsCollarId: sku.specificationsCollarId,
                    subPrice: arr.map((mm: any) => mm.totalPrice).reduce((p: any, c: any) => p + c, 0),
                    subCount: arr.map((mm: any) => mm.num).reduce((p: any, c: any) => p + c, 0),
                    children: new Map()
                })
            }

            let child: Map<string,any> = goodMap.get(label).children

            if (!child.has(sku.colorName)) {
                child.set(sku.colorName,{
                    picId: sku.picId,
                    userPrice: sku.singlePrice,
                    colorName: sku.colorName,
                    collarName: sku.collarName,
                    modelNo: sku.modelNo,
                    releaseId: sku.releaseId,
                    unid: uni.$u.guid(4),
                    list: []
                })
            }
            child.get(sku.colorName).list.push(sku)
        })
        data.list.push(goodMap)
        console.log(goodMap);
    }
    orderStore.addDealedData2Cache(data)
}

const orderDetails = (id: string|number) => {
    uni.$u.$MRouter.orderDetail.to({ id });
}
</script>

<style scoped lang="scss">
@import './common.scss';
</style>
